<template>
    <div class="quartz-job-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
            <el-form ref="jobDialogFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="100px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="任务名称" prop="name">
                            <el-input v-model="state.ruleForm.name" placeholder="请输入任务名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="任务组名">
                            <el-select v-model="state.ruleForm.jobGroup" placeholder="请输入任务组名">
                                <el-option
                                v-for="dict in groupDict"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" class="mb20">
                        <el-form-item label="调用方法" prop="invokeTarget">
                            <el-input v-model="state.ruleForm.invokeTarget" placeholder="请输入调用目标字符串" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" class="mb20">
                        <el-form-item label="cron表达式" prop="cronExpression">
                            <el-popover :visible="state.cronPopover" width="600px">
                            <vue3CronPlus
                                i18n="cn"
                                @change="changeCron"
                                @close="state.cronPopover = false"
                                max-height="200px"
                            />
                            <template #reference>
                                <el-input clearable
                                @click="state.cronPopover = true"
                                v-model="state.ruleForm.cronExpression"
                                placeholder="请选择cron表达式"
                                ></el-input>
                            </template>
                            </el-popover>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="state.ruleForm.id !== undefined">
                        <el-form-item label="状态">
                            <el-radio-group v-model="state.ruleForm.status">
                                <el-radio
                                v-for="dict in statusDict"
                                :key="dict.value"
                                :label="dict.value"
                                >{{ dict.label }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="13" class="mb20">
                        <el-form-item label="执行策略">
                            <el-radio-group v-model="state.ruleForm.misfirePolicy">
                                <el-radio-button label="1">立即执行</el-radio-button>
                                <el-radio-button label="2">执行一次</el-radio-button>
                                <el-radio-button label="3">放弃执行</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="11"  class="mb20">
                        <el-form-item label="是否并发">
                            <el-radio-group v-model="state.ruleForm.concurrent">
                                <el-radio-button label="0">允许</el-radio-button>
                                <el-radio-button label="1">禁止</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="备注信息">
                            <el-input v-model="state.ruleForm.remark" placeholder="请输入备注信息" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="quartzJobDialog">
    import { reactive, ref, nextTick } from 'vue';
    import constConfig from '/@/utils/constConfig';
    import { jobApi } from '/@/api/monitor/quartz/job';
    import { vue3CronPlus } from 'vue3-cron-plus'
    import 'vue3-cron-plus/dist/index.css'
    
    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['refresh']);

    const props = defineProps({
        statusDict: {
            type: Array<any>,
            default: () => [],
        },
        groupDict: {
            type: Array<any>,
            default: () => [],
        },
    });
    // 定义变量内容
    const jobDialogFormRef = ref();
    const state = reactive({
        cronPopover: false,
        ruleForm: {
            misfirePolicy: '1',
            concurrent: '1',
   
        } as JobType,
        dialog: {
            isShowDialog: false,
            type: '',
            title: '',
            submitTxt: '',
        },
        rules: {
            id:{ required: true, message: "任务ID不能为空", trigger: "blur" },
            name:{ required: true, message: "任务名称不能为空", trigger: "blur" },
            jobGroup:{ required: true, message: "任务组名不能为空", trigger: "blur" },
            invokeTarget:{ required: true, message: "调用目标字符串不能为空", trigger: "blur" },
            cronExpression:{ required: true, message: "cron执行表达式不能为空", trigger: "blur" },
            misfirePolicy:{ required: true, message: "计划执行错误策略（1立即执行 2执行一次 3放弃执行）不能为空", trigger: "blur" },
            concurrent:{ required: true, message: "是否并发执行（0允许 1禁止）不能为空", trigger: "blur" },
            status:{ required: true, message: "状态（0正常 1暂停）不能为空", trigger: "blur" },
            remark:{ required: true, message: "备注信息不能为空", trigger: "blur" },
        },
    });

    // 打开弹窗
    const openDialog = (type: string, row: JobType) => {
        state.dialog.type = type;
        state.dialog.isShowDialog = true;
        if (type === constConfig.dialogType.add) {
            state.dialog.title = '新增定时任务';
            state.dialog.submitTxt = '新 增';
        } else {
            state.ruleForm = row;
            state.dialog.title = '修改定时任务';
            state.dialog.submitTxt = '修 改';
        }
        nextTick(() => {
            jobDialogFormRef.value.clearValidate();
        });
    };
    // 关闭弹窗
    const closeDialog = () => {
        state.dialog.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
        closeDialog();
    };
    // 提交
    const onSubmit = () => {
        jobDialogFormRef.value.validate((valid: boolean) => {
            if (valid) {
                if (state.dialog.type === constConfig.dialogType.add) {
                    jobApi().save(state.ruleForm).then(() =>{
                        closeDialog();
                        emit('refresh');
                    })
                } else {
                    jobApi().update(state.ruleForm).then(()=>{
                        closeDialog();
                        emit('refresh');
                    })
                }
            }
        })
    };
    const changeCron = (val: string) => {
      if(typeof(val) !== 'string') return false
      state.ruleForm.cronExpression = val
    }

    // 暴露变量
    defineExpose({
        openDialog,
    });
</script>
